<template>
	<view class="my-page" v-if="isLandscape">
		<view class="key">
		  <span class='末'>末</span>
		  <span class='日'>日</span>
		  <span></span>
		  <span class='双'>双</span>
		  <span class='人'>人</span>
		  <span class='成'>成</span>
		  <span class='行'>行</span>
		</view>
		<view class="info">
			抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
		</view>
		<view class="info2">
			2024 - 2025 版权所有 © 成都信息工程大学软件2班 www.cuit.com
		</view>
	</view>
	<view class="tip" v-else>
	  <text>请将设备旋转到横屏模式以查看内容</text>
	</view>
	
	<!-- 加载进度 -->
	<view class="loading">
		资源加载中...{{loadingNumber}}%
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	export default {
		data() {
			return {
				isLandscape: false,
				loadingNumber:0
			}
		},
		//当页面加载完成触发
		mounted() {
			this.checkOrientation();
			window.addEventListener('resize', this.checkOrientation);
			//全屏运行
			const appContainer = document.documentElement; // 或指定某个 DOM 元素
			this.enterFullscreen(appContainer);
		},
		//屏蔽地址栏实现全屏效果
		enterFullscreen(element) {
		    if (element.requestFullscreen) {
		        element.requestFullscreen();
		    } else if (element.mozRequestFullScreen) { // Firefox
		        element.mozRequestFullScreen();
		    } else if (element.webkitRequestFullscreen) { // Chrome, Safari 和 Opera
		        element.webkitRequestFullscreen();
		    } else if (element.msRequestFullscreen) { // IE/Edge
		        element.msRequestFullscreen();
		    }
		},
		//当页面摧毁前触发
		beforeDestroy() {
			window.removeEventListener('resize', this.checkOrientation);
		},
		methods: {
			checkOrientation() {
			  // 检测设备方向 宽大于高
			  this.isLandscape = window.innerWidth > window.innerHeight;
			  if(this.isLandscape){
				  audioManager.playAudio('jiazai', false);
				  // 计时器 300毫秒一次
				  let a = setInterval(()=>{
					  // 随机加上 1-3 
					  this.loadingNumber += Math.floor(Math.random() * 3) + 1;
					  if(this.loadingNumber >= 100){
						  clearInterval(a);
						  uni.redirectTo({
						  	url:"/pages/index/index"
						  })
					  }
				  },300);
			  }else{
				  //暂停
				  //audioManager.pauseAudio('jiazai');
				  //摧毁所有音频
				  audioManager.destroyAll();
			  }
			}
		}
	}
</script>

<style scoped lang="scss">
@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
$bright : #AFA695;
$gold : #867862;
$dark : #746853;

$duration : 8s;

.tip{
	width: 100%;
	height: 100vh;
	text-align: center;
	line-height: 100vh;
	font-size: 20px;
}

.info{
	position: fixed;
	width: 100%;
	height: 20px;
	bottom: 10px;
	color: #a4aca5;
	text-align: center;
	line-height: 20px;
	font-size: 11px;
}
.info2{
	position: fixed;
	width: 100%;
	height: 20px;
	bottom: 30px;
	color: #a4aca5;
	text-align: center;
	line-height: 20px;
	font-size: 11px;
}
.my-page {
    width: 100%;
    height: 100vh;
    display: flex;
    background: #000;
    overflow: hidden;
}

.key {
    margin: auto;
    perspective: 2000px;
    transform-style: preserve-3d;
    font: 10vw Righteous;
    animation: fade $duration infinite;
}

span {
    position: relative;
    display: inline-block;
    min-width: .5em;
    text-align: center;
    transform-style: preserve-3d;
    transform:  rotateY(25deg);
    animation: rotate $duration infinite ease-in;
    color: black;
    
    &:after, &:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: attr(class);
        color: $gold;
        z-index: -1;
        animation: shadow $duration infinite;
    }
    
    &:before {
        transform: translateZ(-14px);
    }
    &:after {
        transform: translateZ(-7px);
    }
}

@keyframes fade {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    25% { opacity: 1; }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotateY(65deg);
    }
    50%, 100% {
        color: $dark;
        transform: rotateY(5deg);
    }
    100% {
        color: $gold;
    }
}

@keyframes shadow {
    from {
        color: shade($gold, 50%);
    }
    25% { 
        color: $bright;
    }
    50%, 100% {
        color: tint($gold, 100%);
    }
}


.loading{
	width: 140px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	position: fixed;
	right: 10px;
	bottom: 40px;
}
</style>